 <template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="orderNo">
                <el-input v-model="searchForm.orderNo" clearable placeholder="订单号"></el-input>
            </el-form-item>
            <el-form-item prop="startTime">
                 <el-date-picker
                      format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                      :picker-options="pickerOptions"
                      v-model="searchForm.startTime"
                      type="month"
                      placeholder="选择月">
                    </el-date-picker>
            </el-form-item>

            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetSearch">重置</el-button>
              <el-button
                type="warning"
                icon="el-icon-download"
                size="small"
                :loading="btnLoading"
                @click="handleExport"
              >导出</el-button>
            </el-form-item>
            <div class="actionBtnRight" style="margin-left:auto">
                <MyRefresh></MyRefresh>
                <!-- <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet> -->
            </div>
          </el-form>
        </div>
        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%"  border :height="tableHeight" v-loading="loading" stripe>

            <el-table-column prop="orderNo" label="订单号"  align="center"></el-table-column>
            <el-table-column prop="orderNo" label="分账方发起方"  align="center">
              <template #default="scope">
                <p>10086705948</p>
                <p>深圳仟枝网络科技有限公司</p>
              </template>
            </el-table-column>
            <el-table-column prop="orderNo" label="分账接收方"  align="center">
              <template #default="scope">
                <p>10088241547</p>
                 <p>深圳候鸟供应链有限公司</p>
              </template>
            </el-table-column>
            <el-table-column prop="orderNo" label="分账明细号"  align="center" width="160">
              <template #default="scope">
                  {{scope.row.divideQueryResponses.divideDetailVOList[0].divideDetailNo}}
              </template>
            </el-table-column>
            <el-table-column prop="orderNo" label="商户分账请求号"  align="center">
              <template #default="scope">
                  {{scope.row.divideQueryResponses.divideRequestId}}
              </template>
            </el-table-column>
            <el-table-column prop="orderNo" label="易宝分账流水号"  align="center" width="160">
              <template #default="scope">
                  {{scope.row.divideQueryResponses.uniqueOrderNo}}
              </template>
            </el-table-column>
            <el-table-column prop="orderNo" label="分账说明"  align="center" >
              <template #default="scope">
                  {{scope.row.divideQueryResponses.divideDetailVOList[0].divideDetailDesc}}
              </template>
            </el-table-column>
            <el-table-column prop="orderNo" label="分账金额/比例"  align="center">
              <template #default="scope">
                  {{scope.row.divideQueryResponses.divideDetailVOList[0].amount}}
              </template>
            </el-table-column>
            <el-table-column prop="orderNo" label="分账状态"  align="center">
              <template #default="scope">
                  {{scope.row.divideQueryResponses.message}}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
          <MyPagination :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize" @pagination="dataInfo" />
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import { hnSettleOrderList, houNiaoOrderExport } from '@/api/getData';
  export default {
    data() {
      return {
        loading: false,
        btnLoading:false,
        time:[],
        searchForm: {
          startTime:'',
          orderNo:'',
          pageNum: 1,
          pageSize: 20,
        },
        tableHeight:0,//table 高度
        dataList:[],
        total: 0
      }
    },
    computed: {
    	pickerOptions (){
        let lastDate = new Date('2022-06-01').getTime();
        return{
          disabledDate(time){
            return time.getTime() < lastDate;
          }
        }
    	}
    },
    mounted() {
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight  - this.$refs.page.offsetHeight - 35;
      })
    },
    methods: {
       /** 导出按钮操作 */
      handleExport() {
         this.$modal.confirm('是否确认导出搜索数据项？').then(() => {
           this.btnLoading = true;
           return houNiaoOrderExport(this.searchForm);
         }).then(response => {
           this.$download.name(response.msg);
           this.btnLoading = false;
         }).catch(() => {});
      },
      handleSearch(){
          this.searchForm.pageNum = 1;
          this.dataInfo();
      },
      async dataInfo() {
        try {
          this.loading = true;
          const result = await hnSettleOrderList(this.searchForm);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      resetSearch(){
        this.resetForm('searchForm');
        this.dataInfo();
      },


    }
  }
</script>

<style scoped lang="scss">
  .table p{
    margin: 0px;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
</style>
